<template>
	<view class="router" v-if="cart.length!==0">
		<my-address></my-address>
		<!-- 商品列表的标题区域 -->
		<view class="cart-title">
			<!-- 左侧的图标 -->
			<uni-icons type="shop" size="20" color="#FF6600"></uni-icons>
			<!-- 右侧的文本 -->
			<text class="cart-title-text">购物车</text>
		</view>
		<!-- 滑动删除效果 -->
		<uni-swipe-action>
			<!-- 循环渲染购物车的商品信息 -->
			<!-- <block > -->
			<block v-for="(item,i) in cart" :key="i">
				<uni-swipe-action-item :options="options" @click="swipeItemClickHandler(item)">
					<my-goods :item="item" :showRadio="true" @radio-change="radioChangeHandler" :showNum="true"
						@num-change="numberChangeHandler"></my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<my-settle></my-settle>
	</view>
	<!-- 空白购物车区域 -->
	<view class="empty-cart" v-else>
		<!-- <image src="/static/my-icons/night.gif" class="empty-img"></image> -->

		<view class="empty-text-box">
			<uni-icons type="cart" size="20" color="#777777"></uni-icons>
			<text class="empty-text">空空如也~</text>
		</view>
		<view aria-label="Orange and tan hamster running in a metal wheel" role="img" class="wheel-and-hamster">
			<view class="wheel"></view>
			<view class="hamster">
				<view class="hamster__body">
					<view class="hamster__head">
						<view class="hamster__ear"></view>
						<view class="hamster__eye"></view>
						<view class="hamster__nose"></view>
					</view>
					<view class="hamster__limb hamster__limb--fr"></view>
					<view class="hamster__limb hamster__limb--fl"></view>
					<view class="hamster__limb hamster__limb--br"></view>
					<view class="hamster__limb hamster__limb--bl"></view>
					<view class="hamster__tail"></view>
				</view>
			</view>
			<!-- <view class="spoke"></view> -->
		</view>
	</view>
</template>

<script>
	// 导入需要的mixins文件
	import badgeMix from '@/mixins/tabbar-badge.js'
	// 按需导入 mapState 这个辅助函数
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [badgeMix],
		// 计算属性
		computed: {
			...mapState('m_cart', ['cart'])
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FFFFFF',
						color: '#C00000'
					}
				}],
				firstLoad: false,
				needRefresh: false
			};
		},
		methods: {
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
			radioChangeHandler(e) {
				this.updateGoodsState(e)
			},
			numberChangeHandler(e) {
				this.updateGoodsCount(e)
			},
			swipeItemClickHandler(item) {
				this.removeGoodsById(item.goods_id)
			}
		}
	}
</script>

<style lang="scss">
	.router {
		// animation: animate 2s;
		padding-bottom: 104rpx;

		.cart-title {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-left: 10rpx;
			border-radius: 6px;
			// border-bottom: 2rpx solid #999999;
			margin: 16rpx;
			margin-bottom: 8rpx;
			box-shadow: 0px 0px 40rpx #DDDDDD;

			.cart-title-text {
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
	}

	// @keyframes animate {
	// 	0% {
	// 		opacity: 0;
	// 		transform: translateY(-50px);
	// 	}

	// 	100% {
	// 		opacity: 1;
	// 		transform: translateY(0);
	// 	}
	// }
	.empty-cart {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150px;

		.wheel-and-hamster {
			--dur: 1s;
			position: relative;
			width: 12em;
			height: 12em;
			font-size: 14px;
		}

		.wheel,
		.hamster,
		.hamster view,
		.spoke {
			position: absolute;
		}

		.wheel,
		.spoke {
			border-radius: 50%;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.wheel {
			background: radial-gradient(100% 100% at center, hsla(0, 0%, 60%, 0) 47.8%, hsl(0, 0%, 60%) 48%);
			z-index: 2;
		}

		.hamster {
			animation: hamster var(--dur) ease-in-out infinite;
			top: 50%;
			left: calc(50% - 3.5em);
			width: 7em;
			height: 3.75em;
			transform: rotate(4deg) translate(-0.8em, 1.85em);
			transform-origin: 50% 0;
			z-index: 1;
		}

		.hamster__head {
			animation: hamsterHead var(--dur) ease-in-out infinite;
			background: hsl(30, 90%, 55%);
			border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
			box-shadow: 0 -0.25em 0 hsl(30, 90%, 80%) inset,
				0.75em -1.55em 0 hsl(30, 90%, 90%) inset;
			top: 0;
			left: -2em;
			width: 2.75em;
			height: 2.5em;
			transform-origin: 100% 50%;
		}

		.hamster__ear {
			animation: hamsterEar var(--dur) ease-in-out infinite;
			background: hsl(0, 90%, 85%);
			border-radius: 50%;
			box-shadow: -0.25em 0 hsl(30, 90%, 55%) inset;
			top: -0.25em;
			right: -0.25em;
			width: 0.75em;
			height: 0.75em;
			transform-origin: 50% 75%;
		}

		.hamster__eye {
			animation: hamsterEye var(--dur) linear infinite;
			background-color: hsl(0, 0%, 0%);
			border-radius: 50%;
			top: 0.375em;
			left: 1.25em;
			width: 0.5em;
			height: 0.5em;
		}

		.hamster__nose {
			background: hsl(0, 90%, 75%);
			border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
			top: 0.75em;
			left: 0;
			width: 0.2em;
			height: 0.25em;
		}

		.hamster__body {
			animation: hamsterBody var(--dur) ease-in-out infinite;
			background: hsl(30, 90%, 90%);
			border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
			box-shadow: 0.1em 0.75em 0 hsl(30, 90%, 55%) inset,
				0.15em -0.5em 0 hsl(30, 90%, 80%) inset;
			top: 0.25em;
			left: 2em;
			width: 4.5em;
			height: 3em;
			transform-origin: 17% 50%;
			transform-style: preserve-3d;
		}

		.hamster__limb--fr,
		.hamster__limb--fl {
			clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%);
			top: 2em;
			left: 0.5em;
			width: 1em;
			height: 1.5em;
			transform-origin: 50% 0;
		}

		.hamster__limb--fr {
			animation: hamsterFRLimb var(--dur) linear infinite;
			background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%);
			transform: rotate(15deg) translateZ(-1px);
		}

		.hamster__limb--fl {
			animation: hamsterFLLimb var(--dur) linear infinite;
			background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%);
			transform: rotate(15deg);
		}

		.hamster__limb--br,
		.hamster__limb--bl {
			border-radius: 0.75em 0.75em 0 0;
			clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0% 30%);
			top: 1em;
			left: 2.8em;
			width: 1.5em;
			height: 2.5em;
			transform-origin: 50% 30%;
		}

		.hamster__limb--br {
			animation: hamsterBRLimb var(--dur) linear infinite;
			background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%);
			transform: rotate(-25deg) translateZ(-1px);
		}

		.hamster__limb--bl {
			animation: hamsterBLLimb var(--dur) linear infinite;
			background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%);
			transform: rotate(-25deg);
		}

		.hamster__tail {
			animation: hamsterTail var(--dur) linear infinite;
			background: hsl(0, 90%, 85%);
			border-radius: 0.25em 50% 50% 0.25em;
			box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset;
			top: 1.5em;
			right: -0.5em;
			width: 1em;
			height: 0.5em;
			transform: rotate(30deg) translateZ(-1px);
			transform-origin: 0.25em 0.25em;
		}

		.spoke {
			animation: spoke var(--dur) linear infinite;
			background: radial-gradient(100% 100% at center, hsl(0, 0%, 60%) 4.8%, hsla(0, 0%, 60%, 0) 5%),
				linear-gradient(hsla(0, 0%, 55%, 0) 46.9%, hsl(0, 0%, 65%) 47% 52.9%, hsla(0, 0%, 65%, 0) 53%) 50% 50% / 99% 99% no-repeat;
		}

		/* Animations */
		@keyframes hamster {

			from,
			to {
				transform: rotate(4deg) translate(-0.8em, 1.85em);
			}

			50% {
				transform: rotate(0) translate(-0.8em, 1.85em);
			}
		}

		@keyframes hamsterHead {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(0);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(8deg);
			}
		}

		@keyframes hamsterEye {

			from,
			90%,
			to {
				transform: scaleY(1);
			}

			95% {
				transform: scaleY(0);
			}
		}

		@keyframes hamsterEar {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(0);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(12deg);
			}
		}

		@keyframes hamsterBody {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(0);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(-2deg);
			}
		}

		@keyframes hamsterFRLimb {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(50deg) translateZ(-1px);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(-30deg) translateZ(-1px);
			}
		}

		@keyframes hamsterFLLimb {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(-30deg);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(50deg);
			}
		}

		@keyframes hamsterBRLimb {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(-60deg) translateZ(-1px);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(20deg) translateZ(-1px);
			}
		}

		@keyframes hamsterBLLimb {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(20deg);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(-60deg);
			}
		}

		@keyframes hamsterTail {

			from,
			25%,
			50%,
			75%,
			to {
				transform: rotate(30deg) translateZ(-1px);
			}

			12.5%,
			37.5%,
			62.5%,
			87.5% {
				transform: rotate(10deg) translateZ(-1px);
			}
		}

		@keyframes spoke {
			from {
				transform: rotate(0);
			}

			to {
				transform: rotate(-1turn);
			}
		}


		.empty-img {
			width: 90px;
			height: 90px;
			border-radius: 50%;
		}

		.empty-text-box {
			position: absolute;
			font-size: 16px;
			color: #777777;
			top: 380rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.empty-text {
				margin-left: 10rpx;
			}
		}
	}
</style>
